<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="addBtn">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addOrUpdateHandle('add')">新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="editBtn">
        <el-button type="success" :disabled="single" plain icon="el-icon-edit" size="mini" @click="addOrUpdateHandle()">修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="delectBtn">
        <el-button type="danger" :disabled="multiple" plain icon="el-icon-delete" size="mini" @click="deleteHandle">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="listBorder" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" v-if="type == 'indexList'" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="编号" align="center" prop="number" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="type == 'indexList'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-s-grid" @click="cabinetHandle(scope.row)">查看智能柜</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150" v-if="chooseTable">
        <template slot-scope="scope">
          <el-button size="small" @click="toggleSelectHandle(scope.row)" :style="actionStyle(scope.row)">
            {{actionText(scope.row)}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 查看智能柜弹窗 -->
    <cabinetList v-if="cabinetListVisible" ref="cabinetList"></cabinetList>
  </div>
</template>

<script>

import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './qrcodeGroup/index-add-or-update.vue'
import CabinetList from '@/views/delivery/cabinetListDialog.vue'  //查看智能柜弹窗
import { findByContent } from "@/api/basic/qrcodeGroup"
export default {
  name: "QrcodeGroup",
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/qrcodeGroup/list',
        getDataListIsPage: true,
        deleteURL: '/qrcodeGroup/remove',
        deleteIsBatch: true,
        createdIsNeed: false
      },
      queryParams: {
        city: '',
        street: '',
        address: ''
      },
      // 表单参数
      form: {},
      areaList: [],
      confirmLoading: false,
      // 表单校验
      rules: {
      },
      cabinetListVisible: false, //智能柜弹窗是否显示
      value: ''
    };
  },
  props: {
    //  type                              使用列表的状态 indexList为后面有操作权限
    //  editBtn                           是否显示修改按钮
    //  addBtn                            是否显示新增按钮
    //  delectBtn                         是否显示删除按钮
    //  listBorder                        table是否展示边框
    //  getType                           二维码列表展示的类型
    //  rowId                             二维码列表id
    type: {
      type: String,
      default: ''
    },
    editBtn: {
      type: Boolean,
      default: false
    },
    addBtn: {
      type: Boolean,
      default: false
    },
    delectBtn: {
      type: Boolean,
      default: false
    },
    listBorder: {
      type: Boolean,
      default: false
    },
    chooseTable: {
      type: Boolean,
      default: false
    },
    getType: {
      type: String,
      default: ''
    },
    rowId: {
      type: Number,
      default: null
    },
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
    CabinetList, //查看智能柜弹窗
  },
  created() {
    this.value = ''
    if (this.getType != 'noBind') {
      this.query()
    } else {
      this.loading = true
      findByContent(this.rowId).then((res) => {
        this.loading = false
        if (res.code !== 200) {
          this.dataList = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.dataList = res.rows
        this.total = res.total
      }).catch(() => {
        this.loading = false
      })
    }
  },
  methods: {
    actionStyle(row) {
      let color = "#666";
      if (this.value) {

        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              color = "#409EFF";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            color = "#409EFF";
          }
        }
      }
      return {
        color
      }
    },
    actionText(row) {

      let text = this.getType == "bind" ? "绑定" : '解绑';

      if (this.value) {
        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              text =  this.getType == "bind" ? "已绑定" : '已解绑';
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            text =this.getType == "bind" ? "已绑定" : '已解绑';
          }
        }
      }
      return text
    },
    toggleSelectHandle(row) {
      if (this.value instanceof Array) {
        const index = this.value.findIndex((r) => r.id === row.id);
        if (index > -1) {
          this.value.splice(index, 1);
        } else {
          this.value.push({ ...row });
        }
      } else {
        if (row.id === this.value?.id) {
          this.value = {};
        } else {
          this.value = { ...row };
        }
        this.$emit('formSubmitHandle', this.value)
      }
    },
  }
};
</script>